<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>admin</title>
    <script src="vuejs/vuejs-2.5.16.js"></script>
    <script src="vuejs/axios-0.18.0.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css"  media="all">
</head>
<body>
<a href="admininformation.jsp" target="mainFrame" class="layui-btn">添加管理员</a>
<table id="app" class="layui-table" lay-even>
    <tr align="center">
        <th>管理员编号</th>
        <th>头像</th>
        <th>管理员昵称</th>
        <th>管理员性别</th>
        <th>手机号码</th>
        <th>email</th>
        <th>生日</th>
        <th colspan="2">操作</th>
    </tr>
    <tr v-for="a in admins">
        <td>{{a.aid}}</td>
        <td><img :src="a.aphoto"></td>
        <td>{{a.aname}}</td>
        <td>{{a.asex}}</td>
        <td>{{a.aphone}}</td>
        <td>{{a.aemail}}</td>
        <td>{{a.birthday}}</td>
        <td><a v-bind={href:"${pageContext.request.contextPath}/AdminFindByIdServlet.action?aid="+a.aid}>修改</a></td>
        <td><a href="#" @click="deleteById(a.aid,pageNumber)">删除</a></td>
    </tr>
    <tr>
        <td colspan="9">
            <a href="#" @click="paging(pageNumber-1)">上一页</a>
            {{pageNumber}} / {{maxPage}}
            <a href="#" @click="paging(pageNumber+1)">下一页</a>
        </td>
    </tr>
</table>
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{
            admins:[],
            maxPage:null,
            pageNumber:null
        },
        methods:{
            deleteById:function (id,page) {
                var _this = this;
                axios.get('${pageContext.request.contextPath}/AdminDeleteAjaxServlet.action',
                    {params:{aid:id}})
                    .then(function (response) {
                        if(response.data.flag){
                            _this.paging(page);
                        }else{
                           alert("删除失败！");
                        }
                    })
                    .catch(function(err){
                        console.log(err);
                    });
            },
            paging:function (page) {
                var _this = this;
                axios.get('${pageContext.request.contextPath}/AdminPagingAjaxServlet.action',
                    {params:{pageNumber:page}})
                    .then(function (response) {
                        _this.admins = response.data.adminList;
                        _this.maxPage = response.data.maxPage;
                        _this.pageNumber = response.data.pageNumber;
                    })
                    .catch(function(err){
                        console.log(err);
                    });
            }
        },
        created :function () {
            this.paging(1);
        }
    });

</script>